const path = require('path');//依赖node的path模块
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin插件，该插件会在构建时生成index.html文件，而文件中会引入所有的输出文件
const CleanWebpackPlugin = require('clean-webpack-plugin');
//输出目录清理插件，这样每次构建会清空输出目录（毕竟每次构建都会重新生成文件，只不过同名文件会覆盖），这样就可以避免一些不必要的残留文件堆积

module.exports = {
  mode: 'production',//生产模式，这样会压缩打包出来的vue文件
	plugins: [
		new CleanWebpackPlugin(["dist"]),//每次打包前清理dist目录
		new HtmlWebpackPlugin({
			filename: "inline.html",
			template: "inline.html",
			inject: false
		}),
		new HtmlWebpackPlugin({
			filename: "index.html",//多个HtmlWebpackPlugin一定要声明文件名，否则都用默认文件名则会覆盖
			template: "index.html",//指定以根目录的index.html为模板，这样最后dist目录生成的html相当于在模板文件基础下引入了打包好的其他资源文件,
			inject: false,//不自动在html中插入资源文件，关于资源的引入方式参见根目录index.html即可
			minify: {//压缩html文件
				removeComments: true,//删除注释
				collapseWhitespace: true//删除换行
			}
		}),
		new HtmlWebpackPlugin({
			title: "我是页面a",
			filename: "a.html",
			template: "index2.html",//指定以根目录的index.html为模板，这样最后dist目录生成的html相当于在模板文件基础下引入了打包好的其他资源文件,
			inject: 'body',
			chunks: ['a'],
			minify: {//压缩html文件
				removeComments: true,//删除注释
				collapseWhitespace: true//删除换行
			}
		}),
		new HtmlWebpackPlugin({
			title: "我是页面b",
			filename: "b.html",
			template: "index2.html",//指定以根目录的index.html为模板，这样最后dist目录生成的html相当于在模板文件基础下引入了打包好的其他资源文件,
			inject: 'body',
			chunks: ['b'],
			minify: {//压缩html文件
				removeComments: true,//删除注释
				collapseWhitespace: true//删除换行
			}
		}),
		new HtmlWebpackPlugin({
			filename: "tpl-loader.html",
			template: "tpl-loader.html",
			inject: 'body',
			chunks: ['tpl']
		})
	],
  resolve: {
    alias: {
		/* //如果不声明vue模块应该使用vue.esm.js（完整版包含编译器，是将模板语法自动转换成渲染方法的关键）这个文件而非默认的runtime-only，
		那么项目运行起来是报错的，
		另外完整版有vue.js、vue.common.js跟vue.esm.js三个版本，对应不同的模块化标准，本例使用vue.esm.js，是es6的标准*/
      'vue$': 'vue/dist/vue.esm.js' 
    }
  },
	entry: {
		index: './src/index.js',//chunkname-->index,
		util: './src/util.js',
		a: './src/a.js',
		b: './src/b.js',
		inline: './src/inline.js',
		tpl: './src/tpl-loader.js'
	},
	output: {
		path: path.resolve(__dirname, 'dist'),//输出目录,
		filename: '[name].js',//chunkname.js-->index.js
		//publicPath: 'http://test.cdn.com'//资源文件路径统一前缀，比如真实线上环境需要全路径的
	},
  module: {
	  rules: [
			{
				//目前这里只是相当于做个笔记，因为目前运行时的代码中还没有必要转换的es代码
				test: /\.js$/,
				loader: 'babel-loader',//使用babel转化es代码为浏览器可识别的js代码，主要是可以向下兼容旧版本的浏览器
				options: {//options相当于旧版本webpack中的query参数
					presets: ['latest']//把所有es最新特性都进行转化
				},
				exclude: path.resolve(__dirname, 'node_modules')//排除node_modules目录
			},
		  {
			  test: /\.css$/,
			  use: [
				  /* css-loader是解析所有css文件，style-loader是把样式插入到html的style标签中，
				  所以应该先css-loader再style-loader，但是loader是从下到上执行的，所以书写顺序应该是先style-loader再css-loader
				  */
				  'style-loader',
					{
						loader: 'css-loader',
					}
					]
		  },
			{
				test: /\.less$/,
				use: [
					'style-loader',
					'css-loader',
					'less-loader'//先解析less
					]
			},
		  {
			  //加载element-ui的字体文件
		  	  test: /\.(woff|woff2|eot|ttf|otf)$/,
		  	  use: [
						'url-loader'//之前使用的是file-loader，然而这样会在打包目录生成对应文件，而url-loader较适合用于小文件，因为其可以将文件转成编码，以字符串的形式插入到引用它的文件中，不会再额外生成文件，这样减少了http请求次数
		  	  ]
		  },
			{
				test: /\.(png|jpg|gif)$/,
				loader: 'file-loader',
				options: {
					name: 'assets/[name].[ext]'//指定图片打包目录
				}
			}
	  ]
  }
}